import React,{useState,useEffect} from "react"
import { Button, Card , Form ,Table , notification,Input ,Modal, message} from 'antd'
import { PlusOutlined,CloseOutlined ,ExclamationCircleOutlined,CheckOutlined,SearchOutlined,DeleteOutlined } from '@ant-design/icons'
import { getToken,addKeyFn  } from '../utils/utils'

import axios from 'axios'
function ApprovalMenu(){

    const [tableData,setTableData] = useState([])
    // 获取列表
    useEffect(()=>{
        axios.get('/my/activity/activityexa',{
            headers:{
                'Authorization':getToken()
            }
        }).then(res=>{
            console.log(res.data)
            const result = JSON.stringify(res.data.data)
            setTableData(addKeyFn(JSON.parse(result)))
        })
    },[])
 
    const [isShow,setIsShow] = useState(false)
    const [myForm] = Form.useForm()


    const paseMethod =(item)=>{
        // 当前页面同步状态
        setTableData(tableData.filter(data=>data.activityId !== item.activityId))
        const activityId = item.activityId
        console.log(item)
        //要前后端同步
        axios.get('/my/activity/activityexapase/'+activityId,{
            headers:{'Authorization':getToken()}
        })
    }
    const confirmMethod=(item)=>{
        Modal.confirm({
            title: '您确定要通过吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                console.log('ok')
                paseMethod(item);
                notification.info({
                message:'通知',
                description:'审批通过',
                placement:"bottomRight",
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }


    // 活动查询
    const [myform] = Form.useForm()
    // 搜索按钮事件
    const searchBtn = obj=>{
        console.log(obj)
        myform.setFieldsValue({activityTitle:''})
        if(obj.activityTitle === undefined){
            message.success('请输入活动标题')
            return false
        }
        setTableData(tableData.filter(data=>data.activityTitle == obj.activityTitle))
        const activityTitle = obj.activityTitle
        // console.log(item)
        axios.get('/my/activity/activitylist/'+activityTitle,{
            headers:{'Authorization':getToken()}
        })

    }
    const columns = [
        {
            title:'索引',
            key:'key',
            dataIndex:'key',
            render:(key)=>{
                return <b>{key}</b>
            }
        },{
            title:'活动标题',
            key:'activityTitle',
            dataIndex:'activityTitle',
            render:(activityTitle)=>{
                return <b>{activityTitle}</b>
            }
        },
        {
            title:'活动时间',
            key:'activityTime',
            dataIndex:'activityTime',
            render:(activityTime)=>{
                return <b>{activityTime}</b>
            }
        },
        {
            title:'活动图片',
            key:'activityPic',
            dataIndex:'activityPic',
            render:(activityPic)=>{
                return (
                    <img style={{width:"50px",height:'50px'}} src={activityPic}/>
                )
            }

        },
        {
            title:'活动地点',
            key:'activityAdress',
            dataIndex:'activityAdress',
            render:(activityAdress)=>{
                return <b>{activityAdress}</b>
            }
        },

        {
            title:'审核状态',
            key:'exa_state',
            dataIndex:'exa_state',
            render:(exa_state)=>{
                if(exa_state==0){
                    return <b>未审批</b>
                }
            }
        },
        {
            title:'操作',
            key:'action',
            render:(item)=>{
              return <div>
                <Button danger shape="circle" 
                  icon={<CheckOutlined />}  
                  style={{marginRight:"10px"}}
                  onClick={()=>confirmMethod(item)}
                />
              </div>
            }
        }
    ]
    return (
        <div>
            <Card title="活动审批列表">
                <Form 
                layout="inline"
                form={myform}
            onFinish={(n)=>{ searchBtn(n) }}
                >
                    <Form.Item label='活动标题' name='activityTitle'>
                        <Input placeholder="请输入要查询的活动标题"/>
                    </Form.Item>
                    <Button htmlType="submit" type="primary" icon={<SearchOutlined />}></Button>  
                </Form>
                <Table 
                    dataSource={tableData}
                    columns={columns}
                    pagination={{pageSize:3}} 
                    rowKey={record=>record.activityId}
                    >
                </Table>
            </Card>
        </div>
    )
}
export default ApprovalMenu